<template>
  <div>
    <el-card style="margin-top:10px">
      <div class="hearder">
        <h3>销售额类别占比</h3>
        <div>
          <el-radio-group v-model="value" size="medium">
            <el-radio-button label="全部渠道"></el-radio-button>
            <el-radio-button label="线上"></el-radio-button>
            <el-radio-button label="门店"></el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div class="charts" ref="charts"></div>
    </el-card>

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Category',
  data() {
    return {
      value: '全部渠道'
    }
  },
  mounted() {
    let myEchart = echarts.init(this.$refs.charts)
    myEchart.setOption({
      tooltip: {
        trigger: 'item',
        // formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        left: 'center',
        top: '10px',
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          top:'5%',
          right:'30%',
          name: '详情',
          type: 'pie',
          radius: [20, 140],
          center: ['75%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 5
          },          
          data: [
              { value: 98233, name: '空调' },
              { value: 88290, name: '平板' },
              { value: 87665, name: '手机' },
              { value: 67223, name: '家具' },
              { value: 56545, name: '家电' },
              { value: 55589, name: '清洁' },
              { value: 43786, name: '音响' }
            ]
        }
      ]
    })
  }
}
</script>

<style scoped>
.hearder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin-top: 0px !important;
}

.charts {
  width: 100%;
  height: 350px;
}
</style>